<template>
  <div class="page-container">
    <pf-table
      ref="pfTable"
      v-model="form"
      :columns="columns"
      :form-items="formItems"
      @get-table-data="getTableData"
    >
      <template #statusStr="{row}">
        <el-tag v-if="row.status === 0" type="success">{{ row.statusStr }}</el-tag>
        <el-tag v-if="row.status === 1" type="danger">{{ row.statusStr }}</el-tag>
      </template>
      <template #handle="{row}">
        <el-button type="text" size="small" @click="showDetail(row)">详情</el-button>
        <el-button type="text" size="small" :class="row.status === 0 ? 'danger-text-button': ''" @click="editStatus(row)">{{ row.status === 0 ? '禁用':'启用' }}</el-button>
      </template>
    </pf-table>
  </div>
</template>

<script>
import { getIndustryList } from '@/api/dictionary'
import { getEnterpriseList, editEnterpriseStatus } from '@/api/enterprise'
import { ACCOUNT_STATUS } from '@/utils/enum'

export default {
  name: 'EnterpriseList',
  components: {
  },
  data() {
    return {
      statusOptions: ACCOUNT_STATUS,
      industryList: [],
      form: {},
      loading: false
    }
  },
  computed: {
    columns() {
      const attrs = { 'min-width': '150px' }
      return [
        { label: '账号', prop: 'account', attrs },
        { label: '行业', prop: 'industryName', attrs },
        { label: '企业名称', prop: 'infoName', attrs },
        { label: '企业法人', prop: 'aptitudeName', attrs },
        { label: '法人身份证', prop: 'idCardNumber', attrs },
        { label: '入驻时间', prop: 'createTime', attrs },
        { label: '账号状态', slot: 'statusStr', attrs },
        { label: '操作', slot: 'handle', attrs: { width: '150px', fixed: 'right' }}
      ]
    },
    formItems() {
      const labelWidth = '110px'
      return [
        {
          type: 'input',
          label: '账号',
          prop: 'account'
        }, {
          type: 'input',
          label: '企业名称',
          prop: 'infoName'
        }, {
          type: 'input',
          label: '企业法人',
          prop: 'aptitudeName'
        }, {
          type: 'input',
          label: '法人身份证',
          prop: 'idCardNumber',
          formItemAttrs: { labelWidth }
        }, {
          type: 'select',
          label: '账号状态',
          prop: 'status',
          options: this.statusOptions
        }, {
          type: 'select',
          label: '所属行业',
          prop: 'industryCode',
          options: this.industryList,
          optProps: {
            label: 'industryName',
            value: 'industryCode'
          }
        }, {
          type: 'date',
          label: '创建时间',
          prop: 'dateRange',
          span: 8,
          attrs: {
            type: 'datetimerange'
          }
        }
      ]
    }
  },

  created() {
    this.getIndustryList()
  },

  methods: {

    // 获取行业列表
    getIndustryList() {
      getIndustryList().then(res => {
        this.industryList = res || []
      }).catch(() => {})
    },

    getTableData({ pageNo, pageSize, ...formQuery }, done) {
      this.loading = true
      const [createStartTime = '', createEndTime = ''] = formQuery?.dateRange || []
      const data = {
        pageNo,
        pageSize,
        createStartTime,
        createEndTime,
        ...formQuery
      }
      getEnterpriseList(data).then(res => {
        this.loading = false
        done({ data: res.data || [], total: res.count || 0 })
      }).catch(() => {
        done({ data: [], total: 0 })
        this.loading = false
      })
      done({ data: [{ status: 0 }], total: 0 })
    },

    // 查看详情
    showDetail(row) {
      const { id, industryCode } = row
      this.$router.push({
        path: '/enterprise/enterprise/detail',
        query: {
          id,
          industryCode
        }
      })
    },

    // 修改状态
    editStatus(row) {
      let status = ''
      let message = ''
      if (row.status === 0) {
        message = '确定禁用该企业吗'
        status = 1
      } else {
        message = '确定启用该企业吗'
        status = 0
      }
      const data = {
        id: [row.id],
        status
      }
      this.$confirm(message, '提示', {
        type: 'warning'
      }).then(() => {
        editEnterpriseStatus(data).then(() => {
          this.$message.success('修改成功')
          this.$refs.pfTable.getTableData()
        }).catch(() => {})
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
